<template>
  <div>
    <p id="hhh" v-html="sanitizedContent"></p>
    <p id="test">{{ safeContent }}</p>
    <div id="test2">
      <ul>
        <li v-for="(item, index) in listItems" :key="index">{{ item }}</li>
      </ul>
    </div>
    <button @click="handleClick">点击更新</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import DOMPurify from 'dompurify' // 需要先 npm install dompurify

// 响应式数据
const sanitizedContent = ref('原始内容')
const safeContent = ref('原始内容')
const listItems = ref(['你好', '你好', '你好', '你好'])

const handleClick = () => {
  // 示例1：消毒内容
  const userInput = '<img src="x" alt="aaa" onerror="alert(1)">'
  sanitizedContent.value = DOMPurify.sanitize(userInput)

  // 示例2：安全内容
  safeContent.value = '<strong>hello xtu!</strong>'

  // 示例3：更新列表
  listItems.value = [...Array(5)].map(() => '你好')
}
</script>

<style>
/* 可以添加样式 */
</style>
